<template>
	<div class="content-wrap">
		<div class="contetn-left">
			<projectInfo style="height: 30%;" />
			<investCase style="height: 40%;" />
      <meterProgress style="height: 30%;" />
		</div>
		<div class="contetn-center">
      <div class="top">
        <projectStatistics/>
      </div>
      <div class="map">
        <homeMap />
      </div>
    </div>
		<div class="contetn-right">
			<safeManage style="height: 40%;" />
      <qualityManage style="height: 30%;" />
			<videoMonitor style="height: 30%;" />
		</div>
	</div>
</template>

<script>
import projectInfo from './components/projectInfo.vue';
import investCase from './components/investCase';
import meterProgress from './components/meterProgress.vue';

import safeManage from './components/safeManage.vue';
import qualityManage from './components/qualityManage.vue';
import videoMonitor from './components/videoMonitor.vue';

import projectStatistics from './components/projectStatistics.vue';
import homeMap from './components/homeMap/index.vue';

export default {
	components: {
		projectInfo,investCase,meterProgress,
		safeManage,qualityManage,videoMonitor,

    projectStatistics,homeMap
	},
	data() {
		return {};
	},

	methods: {}
};
</script>
<style lang="scss" scoped>
.content-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	// padding: 20px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: space-between;

	//左边 右边 结构一样
	.contetn-left,
	.contetn-right {
		width: 30%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-between;
		position: relative;
	}
	// 中间
	.contetn-center {
		width: 40%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-between;
    .top{
      
    }
    .map{
      flex: 1;
      height:300px;      
    }
	}
}

@keyframes rotating {
	0% {
		-webkit-transform: rotate(0) scale(1);
		transform: rotate(0) scale(1);
	}
	50% {
		-webkit-transform: rotate(180deg) scale(1.1);
		transform: rotate(180deg) scale(1.1);
	}
	100% {
		-webkit-transform: rotate(360deg) scale(1);
		transform: rotate(360deg) scale(1);
	}
}
</style>
